 <!-- 个人中心 -->
<template>
    <div class=''>
        <div v-if="detailData.type === 'PERSON'" class="brw pb-24px pt-24px firstItem">
      <div class="baseInfo">
        <div class="flex">
          <descriptions :data="baseInfoData" :column="3" />
          <el-button type="primary" icon="Edit" @click="editFn">编辑</el-button>
        </div>
      </div>
    </div>
    <div v-if="detailData.type === 'COMPANY'">
      <div class="brw pb-24px pt-24px firstItem">
        <div class="use-title-icon">服务类型</div>
        <div class="baseInfo">
          <div class="flex">
            <div class="photo">
              <el-image class="img" src="https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg" fit="cover" />
            </div>
            <descriptions :data="baseInfoData" :column="3" />
            <el-button type="primary" icon="Edit" @click="editFn">编辑</el-button>
          </div>
          <div class="info">
            <div class="title">企业详情</div>
            <div class="contact">{{ detailData.companyDesc }}</div>
          </div>
        </div>
      </div>

      <div class="brw pb-24px pt-24px mt-12px" v-if="detailData.categoryCodes.includes('OVERSEAS_WAREHOUSE')">
        <div class="use-title-icon">海外仓</div>
        <div class="warehouseInfo">
          <descriptions :data="warehouseInfoData" :column="3" />

          <div class="warehouseList">
            <div class="title">海外仓信息</div>
            <ul>
              <li v-for="(item, index) in detailData.companyWarehouseList" :key="index">
                <useImage class="img" :src="item.warehouseImg"></useImage>
                <div class="name">
                  <span>{{ item.warehouseName }}</span>
                  <span>{{ item.warehouseArea }}㎡</span>
                </div>
                <div class="address">
                  <i class="iconfont icon-address"></i>
                  <p>地址：{{ item.warehouseAddress }}</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="brw pb-24px pt-24px mt-16px" v-if="detailData.categoryCodes.includes('SPECIAL_LINE')">
        <div class="use-title-icon">专线</div>
        <descriptions :data="railwayLineData" :column="3" />
        <div class="title mt-6px font-600">专线服务</div>
        <div class="railway-line">
          <div class="item">
            <div class="img">
              <img src="@/assets/images/icon1.png" />
            </div>
            <div>包裹限重：{{ detailData.packageWeightMin }}-{{ detailData.packageWeightMax }}kg</div>
          </div>
          <div class="item">
            <div class="img">
              <img src="@/assets/images/icon2.png" />
            </div>
            <div>尺寸限制：{{ detailData.packageLength }}*{{ detailData.packageWidth }}*{{ detailData.packageHeight }}</div>
          </div>
          <!-- <div class="item">
          <div class="img">
            <img src="@/assets/images/icon3.png" />
          </div>
          <div>走货属性： 带电商品、液体、普货。</div>
        </div> -->
          <div class="item">
            <div class="img">
              <img src="@/assets/images/icon4.png" />
            </div>
            <div>揽货范围： {{ detailData.deliveryCityNames }}</div>
          </div>
          <div class="item">
            <div class="img">
              <img src="@/assets/images/icon5.png" />
            </div>
            <div class="content">申报要求：{{ detailData.declareDesc }}</div>
          </div>
        </div>
      </div>

      <div class="brw pb-6px pt-24px mt-16px" v-if="detailData.categoryCodes.includes('SERVICE_PROVIDER')">
        <div class="use-title-icon">服务商</div>
        <descriptions :data="serverData" :column="3" />
      </div>
    </div>
    </div>
</template>

<script setup>
import { companyScaleEnum } from "@/utils/dict"
const user = useStore.user();
const router = useRouter();
const route = useRoute();

definePageMeta({
  title: '公司详情',
  middleware: [
    'authenticated',
  ],
});
useHead({
    title: `公司名称-${appTitle}`,
})

const baseInfoData = ref();

const warehouseInfoData = ref([]);

const railwayLineData = ref([]);

const serverData = ref([]);

const detailData = ref({});
const companyServiceList = ref([]);
const getDetail = () => {
  api.get(`/user/detail/${user.userInfo.employeeId}`).then((res) => {
    if (res.type === "COMPANY") {
      detailData.value = res.userCompanyDetailVO;
      detailData.value.type = res.type;
      detailData.value.categoryCodes = detailData.value.categoryCodes.split(",")
      companyServiceList.value = companyServiceListSet(res.userCompanyDetailVO.companyServiceList);

      const serviceType = [];
      detailData.value.categoryCodes.forEach((key) => {
        serviceType.push(companyServiceList.value[key].categoryName);
      });

      baseInfoData.value = [
        { label: "注册类型", value: "企业" },
        { label: "企业名称", value: detailData.value.companyName },
        { label: "企业类型", value: serviceType.join(",") },
        { label: "企业规模", value: filterEnum(detailData.value.companyScale, companyScaleEnum) },
        { label: "联系人", value: detailData.value.contactName },
        { label: "联系电话", value: detailData.value.cantactPhone },
      ];

      if (res.userCompanyDetailVO.companyServiceList.length > 0) {
        companyServiceList.value.OVERSEAS_WAREHOUSE?.serviceItemTypeVO.forEach((item) => {
          warehouseInfoData.value.push({
            label: item.name,
            value: item.serviceItemList.map((it) => it.name).join(","),
          });
        });
        companyServiceList.value.SPECIAL_LINE?.serviceItemTypeVO.forEach((item) => {
          railwayLineData.value.push({
            label: item.name,
            value: item.serviceItemList.map((it) => it.name).join(","),
          });
        });
        companyServiceList.value.SERVICE_PROVIDER?.serviceItemTypeVO.forEach((item) => {
          serverData.value.push({ label: item.name, value: item.serviceItemList.map((it) => it.name).join(","), span: 3 });
        });
      }
    } else {
      detailData.value = res;
      detailData.value.type = res.type;
      baseInfoData.value = [
        { label: "联系人", value: detailData.value.contactName },
        { label: "联系电话", value: detailData.value.phone },
      ];
    }
  });
};
// 将接口数据转为可用结构
const companyServiceListSet = (metadata) => {
  const list = JSON.parse(JSON.stringify(metadata));
  const staging = {};
  for (let index = 0; index < list.length; index++) {
    const item = list[index];

    if (!staging[item.categoryCode]) {
      staging[item.categoryCode] = {
        categoryCode: item.categoryCode,
        categoryName: item.categoryName,
        serviceItemTypeVO: [item.serviceItemTypeVO],
      };
    } else {
      staging[item.categoryCode].serviceItemTypeVO.push(item.serviceItemTypeVO);
    }
  }
  return staging;
};

// 编辑用户信息
const editFn = (row) => {
  router.push({
    path: "/user/personal/edit",
    query: { id: user.userInfo.employeeId },
  });
};
onMounted(() => {
  getDetail();
});
</script>



<style scoped lang='scss'>
.baseInfo {

    .photo {
        width: 154px;
        height: 104px;
        margin-right: 40px;
        border-radius: 4px;
        overflow: hidden;

        .img {
            width: 100%;
            height: 100%;
        }
    }

    .info {
        .title {
            line-height: 20px;
            color: var(--use-color-info-light-3);
            padding-bottom: 4px;
        }

        .contact {
            line-height: 22px;
        }
    }
}

.tags {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;

    span {
        background: #F0F2F9;
        height: 32px;
        line-height: 32px;
        border-radius: 6px;
        padding: 0 12px;
    }
}


.companyDescribe {
    p {
        text-indent: 2em;
    }
}

.warehouseList {
    .title {
            line-height: 20px;
            color: var(--use-color-info-light-3);
            padding-bottom: 4px;
        }
    ul {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    li {
        width: 292px;
        padding: 12px;
        border: 1px solid var(--use-color-line);
        border-radius: 4px;
        cursor: pointer;

        &:hover {
            border-color: var(--use-color-info);
        }

        .img {
            width: 266px;
            height: 144px;
            border-radius: 4px;
        }

        .name {
            line-height: 24px;
            padding: 12px 0;
            display: flex;
            justify-content: space-between;

            span {
                &:nth-child(1) {
                    font-size: 16px;
                    font-weight: bold;
                }

                &:nth-child(2) {
                    font-size: 14px;
                }
            }
        }

        .address {
            display: flex;

            .iconfont {
                margin-right: 8px;
            }

            line-height: 22px;
        }
    }
}

.railway-line {
    .item {
        margin: 13px 0;
        line-height: 22px;
        display: flex;
        align-items: center;

        &:last-of-type {
            margin-bottom: 0;
        }

        .img {
            width: 32px;
            height: 32px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 12px;
            border: 1px solid var(--use-color-line);
            border-radius: 32px;

            img {
                width: 18px;
                height: 18px;
            }
        }

        .content {
            flex: 1;
        }
    }
}
</style>
